<template>
    <div v-loading="loading">
    <template v-if="packageList && packageList.length > 0">
        <el-row :gutter="20" v-for="(infos,indexs) in packageList" :key="indexs">
            <el-col :span="8" v-for="(info,innerindex) in infos" :key="innerindex">
                <el-card class="box-card">
                    <!--<span v-if="info.inuse == 1" class="biao">
                        <span>上线</span>
                    </span>-->

                    <div class="packagebox">
                    <div class="pktitle">{{info.name}}(继承)</div>
                    <div class="pkinfo">
                        <div>原包ID：{{info.ppackageid}}</div>
                        <div>内容包ID：{{info.packageid}}</div>
                        <div>创建时间：{{info.ctime?info.ctime:'-'}}</div>
                        <div>最后更新：{{info.mtime?info.mtime:'-'}}</div>
                    </div>
                    <div class="btn-control"><el-button  type="primary" class="btn-nr" @click="handleContent(info.packageid)">内容管理</el-button></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </template>
    <template v-else-if="packageList && packageList.length == 0 && !loading">
        <el-empty description="暂无内容包，快快加入项目吧！"></el-empty>
    </template>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import { getExtsList } from "@/api/package/exts"
    import {useRoute, useRouter} from 'vue-router'
    export default {
        name: "",
        components: {},
        setup() {
            const route = useRoute()
            const router = useRouter()
            const query = route.query
            const loading = ref(true)
            const packageList = ref([])

            const getPackageList = () => {
                getExtsList().then( response => {
                    loading.value = false
                    // console.log(response)
                    if( response.errcode == 0 && response.data.list.length > 0 ){
                        response.data.list.forEach((value,index) => {
                            const pindex = Math.floor(index/3)
                            if( !packageList.value[pindex] ){
                                packageList.value[pindex] = []
                            }
                            packageList.value[pindex].push(value)
                        });
                        // console.log(packageList)
                    }else{
                        console.log(response)
                    }
                })
            }
            const handleContent = (packageid) => {
                query.packageid = packageid
                router.push({path: '/package/contentproject/index', query: query})
            }
            const init  = () => {
                getPackageList()
            }
            return {
                loading,
                packageList,
                init,
                handleContent
            }
        }
    }
</script>

<style scoped  lang="scss">
   /* el-row-start */
    .el-button__text--expand{letter-spacing: 0;margin-right: 0;}
    .nrtitle{font-size:20px;font-weight: 600;}
    .el-row {
        margin-bottom: 20px;
        // padding-right: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        position: relative;
        border-radius: 4px;
    }
    .bg-purple-dark {
    background: #99a9bf;
    }
    .bg-purple {
    background: #d3dce6;
    }
    .bg-purple-light {
    background: #e5e9f2;
    }
    .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
    }
    /* el-row-end */
    .self-flex-align--center {
        display: flex;
        align-items: center;
    }
    .box-card{
        .el-row{
            margin-bottom:0;
            span{
                .el-button{color:#333 !important;font-size: 14px !important;}
            }
        }
    }
    .packagebox{
        margin: auto;
        width:80%;
        .pktitle{
            font-size: 18px;
            color:#333;
            font-weight: 600;
        }
        .pkinfo{
            margin:15px auto 30px;
            font-size: 14px;
            color:#666;
            >div{
                margin-top: 10px;
            }
            >div:first-child{margin-top: 0;}
        }
        .btn-control{
            text-align: center;
            .btn-nr{
                margin:0 auto 16px;
                width:60%;
            }
        }

    }
    .biao{
        position:absolute;
        top: -3px;
        left:8px;
        width:58px;
        height:58px;
        line-height: 20px;
        color:#fff;
        font-size: 12px;
        background: url('~@/assets/img/icon_01.png') center no-repeat;
        background-size: 100%;
        >span{
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            display: block;
            filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
        }
    }
</style>
